import { Tooltip, ButtonGroup, Button } from '@douyinfe/semi-ui';
import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
import { useSelector, shallowEqual } from 'react-redux';
import { prevItem, nextItem } from '@/redux/role/role-actions';
import { IRootReducerState } from '@/store/root-reducer';
import { useDispatch } from 'react-redux';
import { usePageContext } from './context';
import { useMemo } from 'react';
import { useNavigate } from 'react-router-dom';

const RoleStepNav = ({}) => {
  const PageContext = usePageContext();
  const PageAction = useMemo(() => {
    return {
      queryParams: PageContext.queryParams,
      setQueryParams: PageContext.setQueryParams,
    };
  }, [PageContext]);

  const {
    role: { offset, index, totalCount },
  } = useSelector<IRootReducerState, any>(
    (state) => ({ role: state.role }),
    shallowEqual
  );
  const offsetIndex = useMemo(() => offset + index, [offset, index]);
  const dispatch = useDispatch<any>();

  const navigate = useNavigate();

  return (
    <Tooltip content='步进导航'>
      <span style={{ display: 'inline-block' }}>
        <ButtonGroup>
          <Button
            icon={<IconChevronLeft />}
            disabled={offsetIndex === 0}
            onClick={async () => {
              const entityKey = await dispatch(
                prevItem(PageAction.queryParams)
              );
              navigate(`../${entityKey}`, {
                replace: true,
                relative: 'path',
              });
            }}
          />
          <Button
            icon={<IconChevronRight />}
            disabled={totalCount - 1 === offsetIndex}
            onClick={async () => {
              const entityKey = await dispatch(
                nextItem(PageAction.queryParams)
              );
              navigate(`../${entityKey}`, {
                replace: true,
                relative: 'path',
              });
            }}
          />
        </ButtonGroup>
      </span>
    </Tooltip>
  );
};

export default RoleStepNav;
